<template>
    <CRUD :config="config" :apis="apis" :dict="dict" @submitClick="submitClick" @exportClick="exportClick">
        <template v-slot:table-cover_img="{ row }">
            <img :src="row.cover_img" alt="" style="width: 50px;">
        </template>
        <template v-slot:dialog-cover_img="{ form }">
            <uploadImg v-model="form.cover_img" />
        </template>
    </CRUD>
</template>

<script>
import { articleCateList, articleInfoList, articleInfoAdd, articleInfoUpdate, userList, articleInfoDel } from '@/api'
import uploadImg from '@/components/uploadImg'
export default {
    components: {
        uploadImg
    },
    data() {
        return {
            config: {
                searchCols: [{
                    label: '文章类别',
                    prop: 'cate_id',
                    type: 'select'
                }, {
                    label: '作者',
                    prop: 'author_id',
                    type: 'select'
                }],
                tableCols: [{
                    label: '文章标题',
                    prop: 'title'
                }, {
                    label: '文章内容',
                    prop: 'content'
                }, {
                    label: '封面图片',
                    prop: 'cover_img'
                }, {
                    label: '发布时间',
                    prop: 'pub_date'
                }, {
                    label: '文章类别',
                    prop: 'cate_id',
                    type: 'select'
                }, {
                    label: '作者',
                    prop: 'author_id',
                    type: 'select'
                }],
                dialogCols: [{
                    label: '文章标题',
                    prop: 'title'
                }, {
                    label: '文章类别',
                    prop: 'cate_id',
                    type: 'select'
                }, {
                    label: '文章内容',
                    prop: 'content',
                    type: 'textarea'
                }, {
                    label: '封面图片',
                    prop: 'cover_img'
                }]
            },
            dict: {},
            apis: {
                refresh: articleInfoList,
                add: articleInfoAdd,
                update: articleInfoUpdate,
                del: articleInfoDel
            }
        }
    },
    async created() {
        let res = await articleCateList()
        this.dict.cate_id = res.data.rows.map(item => ({
            label: item.name,
            value: item.id
        }))
        let userRes = await userList()
        this.$set(this.dict, 'author_id', userRes.data)
    },
    methods: {
        submitClick(form, callback) {
            if (typeof form.cover_img == 'string') return callback()
            form.cover_img = !form.cover_img || !form.cover_img.length ? '' : form.cover_img[0].url
            callback()
        },
        exportClick(obj, callback) {
            let data = JSON.parse(JSON.stringify(obj.sourceData))
            data.map(item => {
                item.author_id = this.dict.author_id.filter(a => a.value == item.author_id)[0].label
                item.cate_id = this.dict.cate_id.filter(c => c.value == item.cate_id)[0].label
            })
            obj.sourceData = data
            callback(obj)
        }
    }

}
</script>